<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子页面-人员信息</title>
		<style type="text/css">
			#a1 {
				width: 1285px;
				height: 30px;
				border: 1px solid gainsboro; /* 设置边框 并设置边框颜色*/
				border-bottom: white; /* 边框底部颜色为白色*/
				font-family: "黑体";
				padding-left: 15px;
				padding-top: 5px;
				font-weight: bold;
				background-color: aliceblue;/* 背景颜色 */
			}

			#b1 {
				width: 1300px;
				height: 50px;
				border: 1px solid gainsboro;/* 设置边框 并设置边框颜色*/

			}

			#bg {
				margin-top: 12px;/* 距离顶部 */
				margin-left: 12px;/* 距离左边 */
			}
			#c1{
				margin-top: 10px;
			}
			#c11 {
				background-image: url(images/btn_add.gif);/* 插入按钮背景图片 */
				width: 85px;
				height: 40px;
			}

			#c12 {
				background-image: url(images/btn_del.gif);
				width: 85px;
				height: 40px;
			}

			#c13 {
				background-image: url(images/btn_config.gif);
				width: 85px;
				height: 40px;
			}

			#c14 {
				background-image: url(images/btn_search.gif);
				width: 85px;
				height: 40px;
			}

			#d1 {
				border: 1px solid gainsboro;
				width: 1300px;
				height: 400px;
				border-collapse:collapse;/* 表格的边框是否被合并为一个单一的边框 */
				margin-top: 5px;

			}
			#d11{
				border-right: 1px solid gainsboro;
				width: 1300px;
				height: 30px;
				background-color: aliceblue;
			}
			#d12{
				
				width: 1300px;
				height: 25px;
			}
			#d13{
				background-color: #FFE4C4;
				width: 1300px;
				height: 25px;
			}
			#e1{
				margin-top: 5px;
			}
			#e11{
				float: left;
				border: 1px solid aliceblue;
				width: 80px;
				height: 25px;
			}
			#c11:hover{background-image:url(images/btn_add_hover.gif); color: #FFFFFF;}/* 鼠标悬停改变按钮背景及文字颜色 */
			#c12:hover{background-image:url(images/btn_del_hover.gif); color: #FFFFFF;}
			#c13:hover{background-image:url(images/btn_config_hover.gif); color: #FFFFFF;}
			#c14:hover{background-image:url(images/btn_search_hover.gif); color: #FFFFFF;}
			}
		</style>
	<body>
		<!-- 人员信息分为四个部分 -->
		<!-- 搜索块 -->
		<div id="a1">搜索</div>
		<div id="b1">
			<form method="post" action="" id="bg">
				姓名<input type="text" name="xm" id="" size="4" maxlength="" />&nbsp;&nbsp;
				是否启用：<select name="sf" id="">
					<option>已启动</option>
					<option>未启动</option>
				</select>&nbsp;&nbsp;
				身份证号：<input type="text" name="sfzh" id="" size="" maxlength="" />&nbsp;&nbsp;
				角色：<select name="xz" id="">
					<option>管理员</option>
					<option>老师</option>
					<option>学生</option>
				</select>&nbsp;&nbsp;
				<input type="button" name="sousuo" id="" value="搜索" />&nbsp;&nbsp;
			</form>
		</div>
		<!-- 按钮块 -->
		<div id="c1">
			<input type="button" id="c11" name="" value="新增" />
			<input type="button" id="c12" name="" value="删除" />
			<input type="button" id="c13" name="" value="修改" />
			<input type="button" id="c14" name="" value="查询" />
		</div>
		<!-- 表格块 -->
		<table id="d1" border="1px" >
			<tr id="d11">
				<th>全选</th>
				<th>姓名</th>
				<th>身份证号</th>
				<th>角色</th>
				<th>是否启用</th>
				<th>创建时间</th>
			</tr>
			<tr id="d12">
				<td><input type="checkbox" /></td>
				<td>张三</td>
				<td>123</td>
				<td>老师</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d13">
				<td><input type="checkbox" /></td>
					<td>张三</td>
					<td>123</td>
					<td>老师</td>
					<td>已启用</td>
					<td>2019-05-08</td>
			</tr>
			<tr id="d12">
				<td><input type="checkbox" /></td>
				<td>张三</td>
				<td>123</td>
				<td>老师</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d13">
				<td><input type="checkbox" /></td>
				<td>李四</td>
				<td>123</td>
				<td>学生</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d12">
				<td><input type="checkbox" /></td>
				<td>王五</td>
				<td>123</td>
				<td>老师</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d13">
				<td><input type="checkbox" /></td>
				<td>红红</td>
				<td>123</td>
				<td>学生</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d12">
				<td><input type="checkbox" /></td>
				<td>丽丽</td>
				<td>123</td>
				<td>学生</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d13">
				<td><input type="checkbox" /></td>
				<td>明明</td>
				<td>123</td>
				<td>老师</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
			<tr id="d12">
				<td><input type="checkbox" /></td>
				<td>天天</td>
				<td>123</td>
				<td>学生</td>
				<td>已启用</td>
				<td>2019-05-08</td>
			</tr>
		</table>
		<!-- 页面选择块 -->
		<div id="e1">
			<button id="e11">首页</button>
			<button id="e11">上一页</button>
			<button id="e11">1</button>
			<button id="e11">2</button>
			<button id="e11">下一页</button>
			<button id="e11">末页</button>
		</div>
		
		
		
</html>
